<template>
	<el-main>
		<div class="tips-default-box">
			本示例视频播放组件使用了vue-core-video-player，
			<a href="https://core-player.github.io/vue-core-video-player/" target="_blank">
				请点击这里打开官方网址
			</a>
		</div>
		<el-row style="margin-top: 24px;" :gutter="20">
			<el-col :md="12">
				<div class="player-container">
					<vue-core-video-player 
						:title="title"
						:muted="muted"
						:loop="loop"
						:autoplay="autoplay"
						:src="scr_url"
						preload="metadata">
					</vue-core-video-player>
				</div>
			</el-col>
			<el-col :md="12">
				<div class="hidden-md-and-down">
					<img src="https://img1.wxzxzj.com/vue-core-video-player-logo@2x.png" style="width: 64px;">
					<p>一款基于 vue.js 的轻量级的视频播放器插件插件</p>
					<h3>特性：</h3>
					<ul>
						<li>个性化配置</li>
						<li>i18n</li>
						<li>服务端渲染</li>
						<li>画中画模式</li>
						<li>事件订阅</li>
						<li>易于开发</li>
						<li>移动端适配</li>
					</ul>
				</div>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	export default {
		name: 'Video',
		data () {
			return{
				title: 'Vue Core Video Player',
				muted: false, //是否静音
				loop: false, //是否循环播放
				autoplay: false, //是否自动播放
				scr_url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
			}
		}
	}
</script>
